<template>
  <br>
  <br>
      <div style="display:flex; ">
        <BasicForm @register="registerForm" style=" width:500px"/>
      </div>


      <div class="box" style="margin: 0 auto;width:896px;border:1px solid #000;height:500px">
        <h3></h3>
        <a-calendar
          :fullscreen="false"
          v-model:value="date"
          @panelChange="onPanelChange"
          @select="selectDate"
        >
          <template slot="headerRender">
            <div>
              <div class="calendar_select">
                <div class="calendar_s_select">
                  <!-- //年、月筛选可通过a-select组件实现，想在改变年、月时改变日历，只需要改变a-calendar组件绑定的value即可 -->
                </div>
              </div>
            </div>
          </template>
          <template #dateFullCellRender="{ current: value }">
            <div :class="getDateCss(value)" v-on:click="showM(value)">
              {{ value.date() }}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getTargetName(value)}}
            </div>
          </template>
        </a-calendar>
      </div>
 <AttScheduleModalHand @register="register1" @success="handleSuccess"></AttScheduleModalHand>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,reactive} from 'vue';
    import dayjs from "dayjs";
    import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, FormSchema, useForm} from '/@/components/Form/index';
    import AttScheduleList from './AttScheduleList.vue'
    import AttScheduleModalHand from './components/AttScheduleModalHand.vue'
    import {autoSchedule, saveOrUpdate,list as listSchedule} from './AttSchedule.api';

    const [register1,{openModal}]  = useModal();

    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);

    const holidays = reactive([]);
    const formSchema: FormSchema[] = [{
      label: '选择设定部门',
      field: 'departmentId',
      component: 'JSelectDept',
      componentProps: ({formModel}) => {
        return {
          checkStrictly: true,
          multiple: false,
        }
      },
      dynamicRules: ({model,schema}) => {
        return [
          { required: true, message: '请选择部门!'},
        ];
      },
    },];
    //表单配置
    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      setModalProps({confirmLoading: false,showCancelBtn:false,showOkBtn:false});
    });
    //设置标题
    const title = "人工排班";

    function handleSuccess() {
    }

    const getDateCss = val=> {
      let _className = "";
      holidays.forEach((e, i) => {
        if ( e.holiday == val.format("YYYY-MM-DD")) {
          _className = "date work";
          return;
        }
      });
      return _className;
    }

    const containTarget = val=>{
      let bl = false;
      holidays.forEach((e, i) => {
        if ( e.holiday == val.format("YYYY-MM-DD")) {
          bl =  true;
        }
      });
      return bl;
    }
    const getTarget = val=>{
      let bl = null;
      holidays.forEach((e, i) => {
        if ( e.holiday == val.format("YYYY-MM-DD")) {
          bl =  e;
        }
      });
      return bl;
    }
    const getTargetName = val=>{
      let bl = "";
      holidays.forEach((e, i) => {
        if ( e.holiday == val.format("YYYY-MM-DD")) {
          bl =  e.name;
        }
      });
      return bl;
    }

    const dateval = ref();
    const departmentId = ref();
    const showM = async (val)=>{
     // console.log( val.format("YYYY-MM-DD"))
      dateval.value = val.format("YYYY-MM-DD");
      let form = await validate();
      departmentId.value = form.departmentId;
      console.log(dateval.value)

      openModal(true,{dateval:dateval.value,departmentId:departmentId.value});


    }

    const date = ref();
    const onPanelChange = (a) => {
      console.log(a);
    };
    const selectDate = (val) => {
      date.value = val;
    };
    // 自定义日历头
    const format = (val) => {
      const newVal = dayjs(val).format("YYYY-MM");
      console.log(val, newVal);
      return newVal;
    };
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}

  .box {
    .header {
      padding: 12px;
      text-align: center;
    }
    .date {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 2px;
      transition: background 0.3s, border 0.3s;
      &.work {
        background-color: rgb(20, 134, 228);
      }
      &.week {
        background-color: rgb(193, 240, 97);
      }
    }
  }
</style>
